<html>

<head>
	<link rel="stylesheet" href="jipda-mod.css" type="text/css" media="all"/> 
	<title>JIPDA - mod</title>
	<script type="text/javascript" src="../jipda/lib/esprima.js"></script>
	<script type="text/javascript" src="../jipda/common.js"></script>
	<script type="text/javascript" src="../jipda/lattice/lattice.js"></script>
	<script type="text/javascript" src="../jipda/lattice/cpLattice.js"></script>
	<script type="text/javascript" src="../jipda/address/address.js"></script>
	<script type="text/javascript" src="../jipda/address/tagAg.js"></script>
	<script type="text/javascript" src="../jipda/benv/defaultBenv.js"></script>
	<script type="text/javascript" src="../jipda/state.js"></script>
	<script type="text/javascript" src="../jipda/ast.js"></script>
	<script type="text/javascript" src="../jipda/visited.js"></script>
	<script type="text/javascript" src="../jipda/jipda.js"></script>
	<script type="text/javascript" src="../jipda/instance/mod/mod.js"></script>
	<script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="lib/d3.v3.min.js"></script>
	<script type="text/javascript" src="lib/ace/ace.js"></script>
	<script type="text/javascript" src="lgraph.js"></script>
	<script type="text/javascript">

		// define print method for JIPDA
    var print = function () { console.log(Array.prototype.slice.call(arguments).join(" ")) }		
		var editor;
		
		function LNode(value, label)
		{
		  this.value = value;
		  this.label = label;
		}
		LNode.prototype.equals =
		  function (x)
		  {
		  	try
		  	{
			  	return Eq.equals(this.value, x.value);	  	  
		  	}
		  	catch (e)
		  	{
		  	  // TODO solve by matching different cases (e.g. JipdaValue, Benv);
		  		return false; 		  	  
		  	}
		 	}
		
		function LLink(source, target, type)
		{
		  this.source = source;
		  this.target = target;
		  this.type = type;
		}
		LLink.prototype.equals = function (x) {return this.source === x.source && this.target === x.target && this.type === x.type}
		LLink.prototype.toString = function () {return "{" + this.source.value + " -> " + this.target.value + "}"}
		
		function doIt()
		{
			$("#depGraph").empty();
			$("#resultValue").empty();
		  var source = editor.getSession().getValue();
			var ast = createAst("function S() {};S.prototype.s=666;function F() {};F.prototype=Object.create(S.prototype);F.prototype.fun=function(p) {return p.s};var f=new F();var s=new S();f.fun(s)");
			var jsa = new ModAnalysis(ast);
			printTree(ast);
 			var lgraph = new LGraph({});
 			
   		jsa.store.entries.forEach(
 			  function (entry)
 			  {
 			    var a = entry[0];
 			    var v = entry[1].aval;
 			    if (v instanceof JipdaValue)
 			    {
 			      
 			    }
 			    else
 			    {
 	 			    var n1 = lgraph.addNode(new LNode(a, a));
 	 			    var iof = jsa.instanceOf(a);
 	 			    if (iof)
 	 			    {
 	 	 			    iof.forEach(
 	  	 			      function (a2)
 	  			        {
 	  			    			var n2 = lgraph.addNode(new LNode(a2, a2));
 	  		 		        var l = new LLink(n1, n2, "iof");
 	  		 		        l.weight = 0.4;
 	  		 		        lgraph.addLink(l); 			      
 	  			        }); 	 			      
 	 			    }
 			    }
 			  });

 			lgraph.draw("#depGraph");
		}
			
		$(function ()
		{
		  editor = ace.edit("editor");
		  editor.getSession().setMode("ace/mode/javascript");
		})
		
	</script>
</head>

<body>
	<div id="editor" style="width: 480px; height: 460px;"></div>
	<div id="manip" style="position: absolute; top:470px;">
		<button id="eval" name="eval" onClick="doIt()">Eval</button>
		<span id="resultValue"></span>
	</div>
	<div id="depGraph" style="position:absolute; left:480px; width:960px; height:960px;"/>
</body>

</html>
